<template>
	<div class="subject_chapter_wrapper">
		<template v-for="(item, index) in data">
			<div class="header">
				<h2>{{ item.title }}</h2>
				<p v-if="!!item.des">{{ item.des }}</p>
			</div>
			<div class="content">
				<template v-for="(n, i) in item.children">
					<slot :data="n" :anchor="`${index}${i}`" :index="i + 1"></slot>
				</template>
			</div>
		</template>
	</div>
</template>

<script>
export default {
	props: {
		data: { type: Array, default: () => [] }
	},
	methods: {
		formatSubjectData(data) {
			return data.testSubjectVO || [];
		}
	}
};
</script>

<style lang="scss" scoped>
.subject_chapter_wrapper {
	flex: 1;
	width: 100%;
	margin: 0 auto;
	max-width: 992px;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	.header {
		display: flex;
		align-items: center;
		background-color: #f2f6fc;
		border-bottom: solid 1px #ebeef5;
		h2 {
			font-size: 18px;
			line-height: 1;
			flex-shrink: 0;
			padding: 15px 16px;
		}
		p {
			color: #909399;
			line-height: 20px;
		}
	}
	.content {
		border-bottom: solid 1px #ebeef5;
		&:last-child {
			border-bottom: none;
		}
	}
}
</style>
